import React, { useEffect, useRef, useState } from 'react';
import { Button, Card, Popconfirm, Row } from 'dw-mx';
import { DateCell, DateToMoment, EditcellTable, Operation, SelectCell } from 'dw-mx-table';
import { PlusCircleOutlined ,MinusCircleOutlined} from 'dw-mx-icons'
import Lov from '@/pages/table/Lov';
import { Code } from 'dw-mx-extend';

export default function OperationDemo() {

    const dataSource = [
        {
            key: '0',
            name: 'Edward King 0',
            age: 32,
            address: 'London, Park Lane no. 0',
            date:'2020/02/09',
            rwzt:'2',
            ksmc:'search',
        },
        {
            key: '1',
            name: 'Edward King 1',
            age: 32,
            address: 'London, Park Lane no. 1',
            date:'2020/08/09',
            rwzt:'2',
            ksmc:'search',
        },
    ]

    const [data,setData] = useState(DateToMoment(dataSource,['date'],'YYYY/MM/DD'))

    const dataRef = useRef()
    dataRef.current = data

    const opDelete = key => {

        const dataSo = dataRef.current;
        const ret = dataSo.filter(item => item.key !== key)
        setData(ret)
    };

    const columns = [
        {
            title: 'name',
            dataIndex: 'name',
            width: 100,
            editable: true,
            componentType:{
                type:"Input",
                props:{placeholder:"请输入"}
            }
        },
        {
            title: 'age',
            dataIndex: 'age',
            width: 100,
            editable: true,
            componentType: {
                type:'InputNumber',
                props: {
                    min:1,
                    max:100,
                }
            }
        },
        {
            title: 'address',
            dataIndex: 'address',
            width: 200,
            editable: true,
            componentType:{
                type:'Input.TextArea',
                props: {
                    autoSize:true
                }
            }
        },
        {
            title: 'date',
            dataIndex: 'date',
            width: 150,
            editable: true,
            componentType:{
                type:'DatePicker',
                props: {
                    format:'YYYY/MM/DD'
                }
            },
            render: (value, record ,index) => {
                return <DateCell value={value} mask={'YYYY/MM/DD'}/>;
            }
        },
        {
            title: '任务状态',
            dataIndex: 'rwzt',
            width: 150,
            editable: true,
            componentType:{
                type:'Select',
                props: {
                    options:Code.JSONCODE([ { value: '1', content: '已完成' }, { value: '2', content: '未完成' }, { value: '3', content: '已作废' } ]) ,
                    allowClear:true,
                }
            },
            render:(value, record, index) => {
                return <SelectCell value={value} align={"left"} options={Code.JSONCODE([ { value: '1', content: '已完成' }, { value: '2', content: '未完成' }, { value: '3', content: '已作废' } ])}/>;
            }
        },
        {
            title: '搜索',
            dataIndex: 'ksmc',
            width:100,
            editable: true,
            componentType:{
                type:'Search',
                props: {
                    modalprops:{
                        searchmodal:Lov,
                        props:{

                        }
                    },
                    searchprops:{}
                }
            }
        },
        {
            title: 'operation',
            dataIndex: 'operation',
            render: (text, record) =>
                dataRef.current.length >= 1 ? (
                    <Popconfirm title="Sure to delete?" onConfirm={() => opDelete(record.key)}>
                        <a>Delete</a>
                    </Popconfirm>
                ) : null,
        },
    ];

    const [selectedRowKeys,setSelectedRowKeys] = useState([])

    const [count,setCount] = useState(2)

    useEffect(() => {
        setData(DateToMoment(data,['date'],'YYYY/MM/DD'))
    }, [data]);

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys)
        }
    }

    const getTabledata = (tabledata) => {
        setData(tabledata)
    }

    //删除
    const handleDelete = () => {
        const ret = Operation.batchDeletion(data,selectedRowKeys)
        setSelectedRowKeys([])
        setData(ret)
    };

    const newData = {
        key: count.toString(),
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`,
        date:new Date(),
        rwzt:'1',
        ksmc:'search',
    };

    const onClick = () => {
        const ret = Operation.addRow(data,newData)
        setCount(count+1)
        setData(ret)
    }

    return (
        <div>
            <Button  onClick={onClick} type="primary" style={{ marginBottom: 16 }}>
                添加行
            </Button>
            <Button  onClick={handleDelete} type="primary" style={{ marginBottom: 16 }}>
                删除
            </Button>
            <PlusCircleOutlined style={{fontSize:'20px'}} onClick={onClick} />
            <MinusCircleOutlined style={{fontSize:'20px'}} onClick={handleDelete}/>
            <a onClick={onClick}>添加行</a>
            <a onClick={handleDelete}>删除</a>
            <Card title={'数据操作'} extra={
                <Row justify="end">
                    <Button type={"primary"} onClick={onClick} style={{marginBottom:'13px'}}>添加行</Button>
                    <Button type={"primary"} onClick={handleDelete} style={{marginBottom:'13px'}}>删除</Button>
                </Row>
            }>
                <EditcellTable
                    rowSelection={{ ...rowSelection, }}
                    dataSource={data}
                    columns={columns}
                    getChildValues={getTabledata}
                >
                </EditcellTable>
            </Card>
        </div>
    );
}